<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>css grid布局 | 伊水河的博客</title>
    <meta name="generator" content="VuePress 1.7.1">
    <link rel="icon" href="/logo.png">
    <meta name="description" content="SO FAR SO GOOD">
    <meta name="image" content="https://yihe.cool/images/cssGrid/form.png">
    <meta name="twitter:title" content="css grid布局">
    <meta name="twitter:description" content="">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:image" content="https://yihe.cool/images/cssGrid/form.png">
    <meta name="twitter:url" content="https://yihe.cool/guide/cssGrid.html">
    <meta property="og:type" content="article">
    <meta property="og:title" content="css grid布局">
    <meta property="og:description" content="">
    <meta property="og:image" content="https://yihe.cool/images/cssGrid/form.png">
    <meta property="og:url" content="https://yihe.cool/guide/cssGrid.html">
    <meta property="article:author" content="伊水河">
    <meta property="article:published_time" content="2020-12-30T00:00:00.000Z">
    <meta property="article:tag" content="css">
    <meta itemprop="name" content="css grid布局">
    <meta itemprop="description" content="">
    <meta itemprop="image" content="https://yihe.cool/images/cssGrid/form.png">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    
    <link rel="preload" href="/assets/css/0.styles.152c4062.css" as="style"><link rel="preload" href="/assets/js/app.2d22f3f9.js" as="script"><link rel="preload" href="/assets/js/3.6721f6a0.js" as="script"><link rel="preload" href="/assets/js/1.546ea5a7.js" as="script"><link rel="preload" href="/assets/js/12.3f3699b0.js" as="script"><link rel="prefetch" href="/assets/js/10.b827ae65.js"><link rel="prefetch" href="/assets/js/11.5e38b612.js"><link rel="prefetch" href="/assets/js/13.7d83bc51.js"><link rel="prefetch" href="/assets/js/14.2ea90c77.js"><link rel="prefetch" href="/assets/js/15.7df6d74c.js"><link rel="prefetch" href="/assets/js/16.33c1bac8.js"><link rel="prefetch" href="/assets/js/17.1aef86d1.js"><link rel="prefetch" href="/assets/js/18.b74cd2bd.js"><link rel="prefetch" href="/assets/js/19.73f82cea.js"><link rel="prefetch" href="/assets/js/20.6354096e.js"><link rel="prefetch" href="/assets/js/21.fd87273b.js"><link rel="prefetch" href="/assets/js/22.f90ee83e.js"><link rel="prefetch" href="/assets/js/23.e5f4f0a1.js"><link rel="prefetch" href="/assets/js/24.239130eb.js"><link rel="prefetch" href="/assets/js/25.db493ad9.js"><link rel="prefetch" href="/assets/js/26.26f3df98.js"><link rel="prefetch" href="/assets/js/27.d55bc04b.js"><link rel="prefetch" href="/assets/js/28.ac3a437a.js"><link rel="prefetch" href="/assets/js/29.9abce28f.js"><link rel="prefetch" href="/assets/js/30.ea843119.js"><link rel="prefetch" href="/assets/js/31.30a083bf.js"><link rel="prefetch" href="/assets/js/32.5f0b6b12.js"><link rel="prefetch" href="/assets/js/33.11456c83.js"><link rel="prefetch" href="/assets/js/34.e9ede601.js"><link rel="prefetch" href="/assets/js/35.17e5bb78.js"><link rel="prefetch" href="/assets/js/36.2f441457.js"><link rel="prefetch" href="/assets/js/37.e9fa7538.js"><link rel="prefetch" href="/assets/js/38.6bd1c237.js"><link rel="prefetch" href="/assets/js/39.8b0b956e.js"><link rel="prefetch" href="/assets/js/4.3ad057db.js"><link rel="prefetch" href="/assets/js/40.89ef1936.js"><link rel="prefetch" href="/assets/js/41.48d0560d.js"><link rel="prefetch" href="/assets/js/42.f804c44f.js"><link rel="prefetch" href="/assets/js/43.9dc6d003.js"><link rel="prefetch" href="/assets/js/44.3033d12c.js"><link rel="prefetch" href="/assets/js/45.60834ce1.js"><link rel="prefetch" href="/assets/js/46.c7eaf70d.js"><link rel="prefetch" href="/assets/js/47.a618490c.js"><link rel="prefetch" href="/assets/js/48.39a68335.js"><link rel="prefetch" href="/assets/js/49.1fa3bd55.js"><link rel="prefetch" href="/assets/js/5.4b2144a0.js"><link rel="prefetch" href="/assets/js/50.0ad5db28.js"><link rel="prefetch" href="/assets/js/51.843c519b.js"><link rel="prefetch" href="/assets/js/52.47d63846.js"><link rel="prefetch" href="/assets/js/53.5284b79d.js"><link rel="prefetch" href="/assets/js/54.b10b8ac1.js"><link rel="prefetch" href="/assets/js/55.3780915d.js"><link rel="prefetch" href="/assets/js/56.4a811b5c.js"><link rel="prefetch" href="/assets/js/57.228652ee.js"><link rel="prefetch" href="/assets/js/58.ef55d2ec.js"><link rel="prefetch" href="/assets/js/59.cbb81185.js"><link rel="prefetch" href="/assets/js/6.3dafc094.js"><link rel="prefetch" href="/assets/js/60.5257b363.js"><link rel="prefetch" href="/assets/js/61.03db625c.js"><link rel="prefetch" href="/assets/js/62.5982e690.js"><link rel="prefetch" href="/assets/js/63.0eccb44b.js"><link rel="prefetch" href="/assets/js/64.d92985de.js"><link rel="prefetch" href="/assets/js/65.4fd6aed1.js"><link rel="prefetch" href="/assets/js/66.acaf73d6.js"><link rel="prefetch" href="/assets/js/67.6db75c01.js"><link rel="prefetch" href="/assets/js/68.1dce863f.js"><link rel="prefetch" href="/assets/js/69.4222a30b.js"><link rel="prefetch" href="/assets/js/7.be8adaa3.js"><link rel="prefetch" href="/assets/js/8.3121f1c6.js"><link rel="prefetch" href="/assets/js/9.03dc3458.js">
    <link rel="stylesheet" href="/assets/css/0.styles.152c4062.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container no-sidebar" data-v-2d5f533b><div data-v-2d5f533b><div id="loader-wrapper" class="loading-wrapper" data-v-d48f4d20 data-v-2d5f533b data-v-2d5f533b><div class="loader-main" data-v-d48f4d20><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div><div data-v-d48f4d20></div></div> <!----> <!----></div> <div class="password-shadow password-wrapper-out" style="display:none;" data-v-64685f0e data-v-2d5f533b data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>伊水河的博客</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>伊水河</span>
            
          <span data-v-64685f0e>2020 - </span>
          2021
        </a></span></div></div> <div class="hide" data-v-2d5f533b><header class="navbar" data-v-2d5f533b><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">伊水河的博客</span></a> <div class="links"><div class="color-picker"><a class="color-button"><i class="iconfont reco-color"></i></a> <div class="color-picker-menu" style="display:none;"><div class="mode-options"><h4 class="title">Choose mode</h4> <ul class="color-mode-options"><li class="dark">dark</li><li class="auto active">auto</li><li class="light">light</li></ul></div></div></div> <div class="search-box"><i class="iconfont reco-search"></i> <input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/categories/前端/" class="nav-link"><i class="iconfont reco-blog"></i>
  前端
</a></div><div class="nav-item"><a href="/categories/leetcode/" class="nav-link"><i class="iconfont reco-coding"></i>
  力扣
</a></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/note/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  笔记
</a></div><div class="nav-item"><a href="/todo/" class="nav-link"><i class="iconfont reco-document"></i>
  TODO
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-account"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://juejin.cn/user/571401777456621" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-juejin"></i>
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://yishuihe.gitee.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/lixiang89" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://node.kg.qq.com/personal?uid=659d9d802d253e8231" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont "></i>
  全民K歌
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav></div></header> <div class="sidebar-mask" data-v-2d5f533b></div> <aside class="sidebar" data-v-2d5f533b><div class="personal-info-wrapper" data-v-ca798c94 data-v-2d5f533b><img src="/b.jpg" alt="author-avatar" class="personal-img" data-v-ca798c94> <h3 class="name" data-v-ca798c94>
    伊水河
  </h3> <div class="num" data-v-ca798c94><div data-v-ca798c94><h3 data-v-ca798c94>51</h3> <h6 data-v-ca798c94>文章</h6></div> <div data-v-ca798c94><h3 data-v-ca798c94>13</h3> <h6 data-v-ca798c94>标签</h6></div></div> <hr data-v-ca798c94></div> <nav class="nav-links"><div class="nav-item"><a href="/categories/前端/" class="nav-link"><i class="iconfont reco-blog"></i>
  前端
</a></div><div class="nav-item"><a href="/categories/leetcode/" class="nav-link"><i class="iconfont reco-coding"></i>
  力扣
</a></div><div class="nav-item"><a href="/tag/" class="nav-link"><i class="iconfont reco-tag"></i>
  标签
</a></div><div class="nav-item"><a href="/note/" class="nav-link"><i class="iconfont reco-suggestion"></i>
  笔记
</a></div><div class="nav-item"><a href="/todo/" class="nav-link"><i class="iconfont reco-document"></i>
  TODO
</a></div><div class="nav-item"><div class="dropdown-wrapper"><a class="dropdown-title"><span class="title"><i class="iconfont reco-account"></i>
      关于
    </span> <span class="arrow right"></span></a> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="https://juejin.cn/user/571401777456621" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-juejin"></i>
  掘金
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://yishuihe.gitee.io" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-mayun"></i>
  码云
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://github.com/lixiang89" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont reco-github"></i>
  github
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li><li class="dropdown-item"><!----> <a href="https://node.kg.qq.com/personal?uid=659d9d802d253e8231" target="_blank" rel="noopener noreferrer" class="nav-link external"><i class="iconfont "></i>
  全民K歌
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></div></div> <!----></nav> <!----> </aside> <div class="password-shadow password-wrapper-in" style="display:none;" data-v-64685f0e data-v-2d5f533b><h3 class="title" style="display:none;" data-v-64685f0e data-v-64685f0e>css grid布局</h3> <!----> <label id="box" class="inputBox" style="display:none;" data-v-64685f0e data-v-64685f0e><input type="password" value="" data-v-64685f0e> <span data-v-64685f0e>Konck! Knock!</span> <button data-v-64685f0e>OK</button></label> <div class="footer" style="display:none;" data-v-64685f0e data-v-64685f0e><span data-v-64685f0e><i class="iconfont reco-theme" data-v-64685f0e></i> <a target="blank" href="https://vuepress-theme-reco.recoluan.com" data-v-64685f0e>vuePress-theme-reco</a></span> <span data-v-64685f0e><i class="iconfont reco-copyright" data-v-64685f0e></i> <a data-v-64685f0e><span data-v-64685f0e>伊水河</span>
            
          <span data-v-64685f0e>2020 - </span>
          2021
        </a></span></div></div> <div data-v-2d5f533b><main class="page"><div class="page-title" style="display:none;"><h1 class="title">css grid布局</h1> <div data-v-3b7f5bdf><i class="iconfont reco-account" data-v-3b7f5bdf><span data-v-3b7f5bdf>伊水河</span></i> <i class="iconfont reco-date" data-v-3b7f5bdf><span data-v-3b7f5bdf>2020-12-30</span></i> <i class="iconfont reco-eye" data-v-3b7f5bdf><span id="/guide/cssGrid.html" data-flag-title="Your Article Title" class="leancloud-visitors" data-v-3b7f5bdf><a class="leancloud-visitors-count" style="font-size:.9rem;font-weight:normal;color:#999;"></a></span></i> <i class="iconfont reco-tag tags" data-v-3b7f5bdf><span class="tag-item" data-v-3b7f5bdf>css</span><span class="tag-item" data-v-3b7f5bdf>grid</span></i></div></div> <div class="theme-reco-content content__default" style="display:none;"><p>grid布局出了也好些时间了，但是之前为了兼容IE，一直都没有使用过。现在终于摆脱IE的束缚了，那么就愉快的使用起来吧。</p> <p>grid类似table，但是更简单，也更灵活。当页面布局是多行多列的时候使用grid更方便，而且HTML结构也会更简单。比如经常要用到的form表单:</p> <p><img src="/images/cssGrid/form.png" alt="form"></p> <p>这样的表单布局很常见，也有很多种实现方式，那么来看下用grid怎么实现吧：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>姓名<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>年龄<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>number<span class="token punctuation">&quot;</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>label</span><span class="token punctuation">&gt;</span></span>职业<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>label</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* grid */</span>
<span class="token selector">form</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 1fr<span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
    <span class="token property">justify-items</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p><a href="/images/cssGrid/grid.html" target="_blank">grid代码</a></p> <p>是不是很简洁呢，那么接下来就介绍一些grid的概念吧。先上图：</p> <p><img src="/images/cssGrid/grid.jpg" alt="grid"></p> <p>grid的相关概念如图，下面用文字来描述：</p> <ul><li>容器：<code>display</code>设置为<code>grid</code>或<code>inline-grid</code>的元素则为网格容器</li> <li>网格线：即图中紫色虚线条</li> <li>单元格：即四面均由网格线围起来的小格子</li> <li>区域：多个单元格组成的一个范围，且为矩形</li> <li>轨道：即两条平行且相邻的网格线之间的区域，可联想火车轨道</li> <li>间距：轨道之间的距离，即图中粗紫色线（紫色阴影区域）</li></ul> <blockquote><p>本文后续会将水平轨道称为行，垂直轨道称为列。</p></blockquote> <p>概念图示例代码如下：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
<span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
<span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [c1] 100px [c2] 1fr [c3]<span class="token punctuation">;</span>
<span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span>1fr<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
<span class="token property">justify-items</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
</code></pre></div><p>了解基本概念之后呢，是否迫切想知道怎么来定义这些东西呢，接下来就依照上述概念图代码来介绍一下常用的grid属性吧！</p> <h2 id="display"><a href="#display" class="header-anchor">#</a> display</h2> <p>构建grid容器，有两个值：</p> <ul><li>grid：块状网格</li> <li>inline-grid：内联网格</li></ul> <p>grid的子项为块状元素</p> <h2 id="grid-template-columns-rows"><a href="#grid-template-columns-rows" class="header-anchor">#</a> grid-template-columns(rows)</h2> <p>用来定义行、列大小（宽高）：</p> <ul><li>grid-template-columns： 用来定义垂直方向轨道大小（宽）</li> <li>grid-template-rows：    用来定义水平方向轨道大小（高）</li></ul> <p>每个轨道的大小由空格隔开，有几个值便会生成几列（行），概念图中代码中的<code>repeat(3,1fr)</code>是什么意思呢？其实<code>repeat</code>函数的作用就是重复几次，参数第一个为重复次数，第二个为要重复的值。故上述中代码中的行列设置等同于：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> 100px 1fr<span class="token punctuation">;</span>
<span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 1fr 1fr 1fr<span class="token punctuation">;</span>
</code></pre></div><p>columns的值就是两个，所以有两列。rows的值为三个，所以有三行。</p> <p>其中<code>fr</code>是个单位，它的意思是将剩余的可用空间平分，如columns里有<code>100px</code>和<code>1fr</code>两列，意思就是第一列宽度为<code>100px</code>，第二列宽度为剩余全部宽度（因为只有一个<code>fr</code>），而rows的代码为三个<code>1fr</code>，那么就是三行的高度平分总高度。</p> <blockquote><p>如果rows值为 <code>1fr 2fr 3fr</code> 呢？思考下吧。</p></blockquote> <p>除了设置固定宽度外，百分比（%）、<code>calc</code>函数都是可以使用的，这里还可以使用一个<code>minmax(min,max)</code>的函数，此函数接收两个参数，最小值和最大值，如：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">minmax</span><span class="token punctuation">(</span>100px<span class="token punctuation">,</span>1fr<span class="token punctuation">)</span> <span class="token function">minmax</span><span class="token punctuation">(</span>80px<span class="token punctuation">,</span>200px<span class="token punctuation">)</span>
</code></pre></div><p>上面代码将网格分成两列，第一列最小值为<code>100px</code>，最大撑满；第二列最小值为<code>80px</code>，最大<code>200px</code>。在需要适应的地方会比较有用。</p> <h3 id="网格线名称"><a href="#网格线名称" class="header-anchor">#</a> 网格线名称</h3> <p>先还原columns的设置代码：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [c1] 100px [c2] 1fr [c3]<span class="token punctuation">;</span>
</code></pre></div><p>中括号里的<code>c1</code>、<code>c2</code>、<code>c3</code>代表了网格线的名称，也就是我们可以给网格线起名，但它们不是必须的，rows里就没有写。如果没有起名的话，网格线则会按照<code>1</code>、<code>2</code>、<code>3</code>...（从上到下，从左往右）这样的数字顺序来命名。</p> <p>网格线的名称也可以是多个，中间用空格隔开，如：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [c1L] 100px [c1R c2] 1fr [c3]<span class="token punctuation">;</span>
</code></pre></div><p>上面就表示第二条列网格线的名称为<code>c1R</code>和<code>c2</code>，可以单独使用任一个。那么给网格线起名有什么用呢？先按下不表。继续看上图中的紫色阴影区域。</p> <h2 id="column-row-gap-gap"><a href="#column-row-gap-gap" class="header-anchor">#</a> column(row)-gap/gap</h2> <p>gap定义网格轨道之间的间距，旧版浏览器可能需要在最前面添加<code>grid-</code>前缀:</p> <ul><li>column-gap：列轨道间距</li> <li>row-gap：行轨道间距</li> <li>gap：上述两个的综合写法，值依次为：row-gap column-gap</li></ul> <p>如上图代码为：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
<span class="token comment">/* 等同于 */</span>
<span class="token property">row-gap</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
<span class="token property">column-gap</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
</code></pre></div><p>好了，上图代码就剩justify-items: end;了，来看下吧。</p> <h2 id="justify-align-items-place-items"><a href="#justify-align-items-place-items" class="header-anchor">#</a> justify(align)-items/place-items</h2> <p>定义单元格的对齐方式</p> <ul><li>justify-items：定义水平方向上的对齐方式</li> <li>align-items：  定义垂直方向上的对齐方式</li> <li>place-items：  上面两种的简写方式，第一个值为<code>align-items</code>，第二个值为<code>justify-items</code></li></ul> <p>下表列出行列对齐方式的值与效果：</p> <table><thead><tr><th>值</th> <th>justify-items</th> <th>align-items</th></tr></thead> <tbody><tr><td>start</td> <td>左对齐</td> <td>上对齐</td></tr> <tr><td>end</td> <td>右对齐</td> <td>下对齐</td></tr> <tr><td>center</td> <td>左右居中</td> <td>上下居中</td></tr> <tr><td>stretch</td> <td>宽度撑满</td> <td>高度撑满</td></tr></tbody></table> <p>更直观请看：</p> <p><img src="/images/cssGrid/%E5%AF%B9%E9%BD%90.png" alt="对齐属性"></p> <blockquote><p>实际是针对所有单元格的，图中只是展示一下，画的不咋地，意思一下。</p></blockquote> <h2 id="grid-column-row-start-grid-column-row-end-grid-column-row-grid-area"><a href="#grid-column-row-start-grid-column-row-end-grid-column-row-grid-area" class="header-anchor">#</a> grid-column(row)-start/grid-column(row)-end/grid-column(row)/grid-area</h2> <p>用于grid下属元素，定义在网格中始终位置：</p> <ul><li>grid-column-start：定义在列轨道中的起始位置</li> <li>grid-column-end：  定义在列轨道中的结束位置</li> <li>grid-column：      以上两行的简写方式，第一个值为start，第二个值为end，中间以斜杠（<code>/</code>）分隔，如：2/4</li> <li>grid-row-start：   定义在行轨道中的起始位置</li> <li>grid-row-end：     定义在行轨道中的结束位置</li> <li>grid-row:          以上两行的简写方式，第一个值为start，第二个值为end，以斜杠（<code>/</code>）分隔。</li> <li>grid-area:         是上述四个start、end的简写，值分别为<code>grid-row-start</code>/<code>grid-column-start</code>/<code>grid-row-end</code>/<code>grid-column-end</code>，以斜杠（<code>/</code>）分隔。</li></ul> <p>上面我们说到了网格线可以命名，在此处便可用上了。</p> <p>column用来设置列，row设置行；start设置起始位置（基于网格线），end设置终止位。如下代码将<code>div</code>分为一个九宫格（<a href="/images/cssGrid/grid2.html" target="_blank">grid2代码</a>）：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token comment">&lt;!-- grid2 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>con<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d1<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>d1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d2<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>d2<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d3<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>d3<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d4<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>d4<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d5<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>d5<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>d6<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>d6<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.con</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> [c1] 100px [c2] 1fr [c3] 2fr [c4]<span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span>1fr<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d1</span><span class="token punctuation">{</span>
    <span class="token property">grid-column-start</span><span class="token punctuation">:</span> c2<span class="token punctuation">;</span>
    <span class="token property">grid-column-end</span><span class="token punctuation">:</span> c4<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> aquamarine<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d2</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> bisque<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d3</span><span class="token punctuation">{</span>
    <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 1<span class="token punctuation">;</span>
    <span class="token property">grid-row-end</span><span class="token punctuation">:</span> 3<span class="token punctuation">;</span>
    <span class="token property">background</span><span class="token punctuation">:</span> brown<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d4</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> cornflowerblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d5</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> darkgreen<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d6</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> lightgray<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>效果如图，已标上网格线名称：</p> <p><img src="/images/cssGrid/position.png" alt="九宫格"></p> <p>可以看到在<code>d1</code>、<code>d3</code>的<code>grid-column-start/end</code>属性中使用了<code>grid-template-columns</code>中定义的网格线名称<code>c1</code>、<code>c2</code>、<code>c4</code>，而在<code>grid-template-rows</code>中则使用的是<code>1</code>、<code>2</code>这样的默认名称（序号）。</p> <p>好了，言归正传，<code>d1</code>设置了列始末位置分别为<code>c2</code>和<code>c4</code>。所以它便占据了<code>c2</code>到<code>c4</code>之间的空间。<code>d3</code>设置了行始末位置为<code>1</code>和<code>3</code>，所以占据了行中<code>1</code>到<code>3</code>之间的空间。没有设置的单元格默认占一个单元格，并依次占据剩下的空间。</p> <p>除了上述值之外，还支持<code>span 数字</code>这样的值，span后面的数字表示这个元素要占据多少个单元格，修改上面css代码中的<code>d2</code>：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.d2</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> bisque<span class="token punctuation">;</span>

    <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>代码中指定d2在列上占据两个单元格（单独写<code>grid-column-start/end</code>也是一样的效果，具体看图），最终结果如下：</p> <p><img src="/images/cssGrid/span.gif" alt="span"></p> <h2 id="justify-align-self-place-self"><a href="#justify-align-self-place-self" class="header-anchor">#</a> justify(align)-self/place-self</h2> <p>前面介绍过单元格的整体对齐方式。这里介绍下针对某个单元格改怎么来定义其对齐方式：</p> <ul><li>justify-self：定义行方向的对齐方式</li> <li>align-self：  定义列方向的对齐方式</li> <li>place-self：  上述两属性的简写，第一个值为<code>align-self</code>，第二个值为<code>justify-self</code></li></ul> <p>以上两个属性在单元格上使用，值与<a href="#justify-align-items-place-items">justify(align)-items</a>相同，修改上面的代码，在d2中添加：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.d2</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> bisque<span class="token punctuation">;</span>
    <span class="token property">grid-column</span><span class="token punctuation">:</span> span 2<span class="token punctuation">;</span>

    <span class="token property">justify-self</span><span class="token punctuation">:</span> end<span class="token punctuation">;</span>
    <span class="token property">align-self</span><span class="token punctuation">:</span> start<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>可以看到d2跑到了右上角，因为默认值为stretch，所以之前的才是充满真个单元格的。</p> <h2 id="justify-align-content-place-content"><a href="#justify-align-content-place-content" class="header-anchor">#</a> justify(align)-content/place-content</h2> <p>之前都是使用<code>fr</code>将整个grid容器占满了，如果没有占满的话，可以使用<code>justify(align)-content</code>来定义其在容器中的位置。</p> <ul><li>justify-content： 水平对齐方式</li> <li>align-content：   垂直对齐方式</li> <li>place-content：   上述两属性的简写，第一个值为<code>align-content</code>，第二个的值为<code>justify-content</code>。</li></ul> <p>修改上面容器的代码：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.con</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token comment">/* grid-template-columns: [c1] 100px [c2] 1fr [c3] 2fr [c4];
    grid-template-rows: repeat(3,1fr); */</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> <span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span>50px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>删除子项grid-column-start/end的相关代码，只保留背景色。值有：</p> <table><thead><tr><th>值</th> <th>justify-content</th> <th>align-content</th></tr></thead> <tbody><tr><td>start</td> <td>左对齐</td> <td>上对齐</td></tr> <tr><td>end</td> <td>右对齐</td> <td>下对齐</td></tr> <tr><td>center</td> <td>左右居中</td> <td>上下居中</td></tr> <tr><td>stretch</td> <td>宽度撑满</td> <td>高度撑满</td></tr> <tr><td>space-around</td> <td>均匀排列每个元素首个元素放置于起点，末尾元素放置于终点</td> <td>同左</td></tr> <tr><td>space-between</td> <td>均匀排列每个元素每个元素周围分配相同的空间</td> <td>同左</td></tr></tbody></table> <p>还是用图来演示下吧：</p> <p><img src="/images/cssGrid/content.gif" alt="content"></p> <h2 id="grid-template-areas-grid-area"><a href="#grid-template-areas-grid-area" class="header-anchor">#</a> grid-template-areas/grid-area</h2> <p>又见到<code>grid-area</code>了，先看定义：</p> <ul><li>grid-template-areas：直接定义一整个网格，而无需向上面那样去画线来完成。</li> <li>grid-area：用于子项，来指定子项属于哪个区域。</li></ul> <p>复制一份上面的代码并修改（html和颜色未变，略。<a href="/images/cssGrid/grid3.html" target="_blank">grid3代码</a>）：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* grid3 */</span>
<span class="token selector">.con</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-areas</span><span class="token punctuation">:</span><span class="token string">&quot;a b .&quot;</span>
                        <span class="token string">&quot;a b d&quot;</span>
                        <span class="token string">&quot;e f f&quot;</span>
                        <span class="token string">&quot;e . c&quot;</span><span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d1</span><span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> b
<span class="token punctuation">}</span>
<span class="token selector">.d2</span><span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> a
<span class="token punctuation">}</span>
<span class="token selector">.d3</span><span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> e
<span class="token punctuation">}</span>
<span class="token selector">.d4</span><span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> f
<span class="token punctuation">}</span>
<span class="token selector">.d5</span><span class="token punctuation">{</span>
    <span class="token property">grid-area</span><span class="token punctuation">:</span> d
<span class="token punctuation">}</span>
</code></pre></div><p>这里的a、b、c等代表的是区域的名称，其中有两个点.，点代表缺省（未名城区域），效果如图：</p> <p><img src="/images/cssGrid/area.png" alt="area"></p> <p>可以看到所有子项均在指定区域，d6因为没指定，所以自动填充到可以填充的空白区域。</p> <h2 id="grid-template"><a href="#grid-template" class="header-anchor">#</a> grid-template</h2> <p>此属性为<code>grid-template-areas</code>、<code>grid-template-columns</code>、<code>grid-template-rows</code>的简写形式，如：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">grid-template</span><span class="token punctuation">:</span>
            [ca] <span class="token string">&quot;a b .&quot;</span> 50px [cz]
            <span class="token string">&quot;a b d&quot;</span>
            <span class="token string">&quot;e f f&quot;</span>
            <span class="token string">&quot;e . c&quot;</span>
            / 1fr 2fr 3fr<span class="token punctuation">;</span>
</code></pre></div><p>效果如图：</p> <p><img src="/images/cssGrid/template.png" alt="grid-template"></p> <p>看chrome的转换结果，<code>grid-template-areas</code>、<code>grid-template-rows</code>可以穿插书写，斜杠后的为<code>grid-template-columns</code>。也可以不使用areas或单独使用areas，如：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 单独areas */</span>
<span class="token property">grid-template</span><span class="token punctuation">:</span>
            <span class="token string">&quot;a b .&quot;</span>
            <span class="token string">&quot;a b d&quot;</span>
            <span class="token string">&quot;e f f&quot;</span>
            <span class="token string">&quot;e . c&quot;</span><span class="token punctuation">;</span>
<span class="token comment">/* 或用作rows/columns的简写*/</span>
<span class="token property">grid-template</span><span class="token punctuation">:</span>[ca] 50px [cz]/1fr 2fr 3fr<span class="token punctuation">;</span>
</code></pre></div><p>前面的问题——<code>1fr 2fr 3fr</code>也给出答案了 😃</p> <h2 id="grid-auto-columns-rows"><a href="#grid-auto-columns-rows" class="header-anchor">#</a> grid-auto-columns(rows)</h2> <p>前面的grid都是完美刚好的存在于容器中，但是实际情况子项也会出现超出容器的时候。超出的部分所在区域称为隐式网格。可以使用<code>grid-auto-columns(rows)</code>来定义他们的宽高。那么，什么时候会超出呢？当子项没有再定义的网格或区域范围内时，就会产生隐式网格，如：子项多于画的网格线；指定了一个没有命名的区域；<code>grid-column-start</code>设置超出等等。</p> <p>下面来看一下具体表现（HTML和背景色依然不变）：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* grid4 */</span>
<span class="token selector">.con</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span><span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.d3</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> brown<span class="token punctuation">;</span>
    <span class="token property">grid-column-start</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token selector">.d4</span><span class="token punctuation">{</span>
    <span class="token property">background</span><span class="token punctuation">:</span> cornflowerblue<span class="token punctuation">;</span>
    <span class="token property">grid-row-start</span><span class="token punctuation">:</span> 5<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><p>这里，设置了三列一行，且<code>d3</code>、<code>d4</code>设置了超出范围的网格线起始点，效果如图：</p> <p><img src="/images/cssGrid/imp.png" alt="隐式网格"></p> <p>可以看到<code>d3</code>的高度是和已声明的网格一样的，但是<code>d4</code>、<code>d5</code>、<code>d6</code>因为不在<code>grid-template</code>的定义之内，所以都显示了最小高度（<code>d1</code>的高度并没有<code>300px</code>，因为被<code>d5</code>、<code>d4</code>给压榨了空间。）。此时便可以通过<code>grid-auto-rows</code>来设置这些在隐式网格中元素的高度。在<code>.con</code>里增加（<a href="/images/cssGrid/grid4.html" target="_blank">grid4代码</a>）：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* grid4 */</span>
<span class="token selector">.con</span><span class="token punctuation">{</span>
    <span class="token property">width</span><span class="token punctuation">:</span> 500px<span class="token punctuation">;</span>
    <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
    <span class="token property">display</span><span class="token punctuation">:</span> grid<span class="token punctuation">;</span>
    <span class="token property">grid-template-columns</span><span class="token punctuation">:</span><span class="token function">repeat</span><span class="token punctuation">(</span>3<span class="token punctuation">,</span>100px<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token property">grid-template-rows</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span>
    <span class="token property">gap</span><span class="token punctuation">:</span> 10px 30px<span class="token punctuation">;</span>

    <span class="token property">grid-auto-rows</span><span class="token punctuation">:</span> 1fr<span class="token punctuation">;</span>
    <span class="token property">grid-auto-columns</span><span class="token punctuation">:</span> 150px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><blockquote><p>auto和template共享容器空间</p></blockquote> <p>效果如图：</p> <p><img src="/images/cssGrid/auto.png" alt="auto设置隐式网格"></p> <h2 id="grid-auto-flow"><a href="#grid-auto-flow" class="header-anchor">#</a> grid-auto-flow</h2> <p>此属性可以理解为更改grid自动填充优先方向，如<code>grid-area</code>例子里的<code>d6</code>没设置自动填充到右上角，如果将左下角和右上角同时空出，在将<code>grid-auto-flow</code>设置为<code>column</code>，那么<code>d6</code>便会填充字左下角了，如图：</p> <p><img src="/images/cssGrid/flow.gif" alt="flow"></p> <p>这里就不上代码了（其实图中已有）。</p> <h2 id="grid"><a href="#grid" class="header-anchor">#</a> grid</h2> <p>这是一个大而全的属性，是以下属性的简写：
grid-template-rows、grid-template-columns、grid-template-areas、grid-auto-rows、grid-auto-columns、grid-auto-flow、grid-column-gap 和 grid-row-gap。具体参见<a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/grid" target="_blank" rel="noopener noreferrer">grid<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>。</p> <p>至此，本文已介绍了大多可能用到的grid属性及相应的值，虽不全，但也基本满足大部分场景了。</p> <blockquote><p>本文参考：</p> <ul><li><a href="https://developer.mozilla.org/zh-CN/docs/Web/CSS/CSS_Grid_Layout" target="_blank" rel="noopener noreferrer">CSS 网格布局<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li> <li><a href="https://www.html.cn/archives/8510/" target="_blank" rel="noopener noreferrer">CSS Grid 布局完全指南(图解 Grid 详细教程)<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></li></ul></blockquote></div> <footer class="page-edit" style="display:none;"><!----> <!----></footer> <!----> <!----> <!----></main> <!----></div></div></div></div><div class="global-ui"><div class="back-to-ceiling" style="right:1rem;bottom:6rem;width:2.5rem;height:2.5rem;border-radius:.25rem;line-height:2.5rem;display:none;" data-v-c6073ba8 data-v-c6073ba8><svg t="1574745035067" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5404" class="icon" data-v-c6073ba8><path d="M526.60727968 10.90185116a27.675 27.675 0 0 0-29.21455937 0c-131.36607665 82.28402758-218.69155461 228.01873535-218.69155402 394.07834331a462.20625001 462.20625001 0 0 0 5.36959153 69.94390903c1.00431239 6.55289093-0.34802892 13.13561351-3.76865779 18.80351572-32.63518765 54.11355614-51.75690182 118.55860487-51.7569018 187.94566865a371.06718723 371.06718723 0 0 0 11.50484808 91.98906777c6.53300375 25.50556257 41.68394495 28.14064038 52.69160883 4.22606766 17.37162448-37.73630017 42.14135425-72.50938081 72.80769204-103.21549295 2.18761121 3.04276886 4.15646224 6.24463696 6.40373557 9.22774369a1871.4375 1871.4375 0 0 0 140.04691725 5.34970492 1866.36093723 1866.36093723 0 0 0 140.04691723-5.34970492c2.24727335-2.98310674 4.21612437-6.18497483 6.3937923-9.2178004 30.66633723 30.70611158 55.4360664 65.4791928 72.80769147 103.21549355 11.00766384 23.91457269 46.15860503 21.27949489 52.69160879-4.22606768a371.15156223 371.15156223 0 0 0 11.514792-91.99901164c0-69.36717486-19.13165746-133.82216804-51.75690182-187.92578088-3.42062944-5.66790279-4.76302748-12.26056868-3.76865837-18.80351632a462.20625001 462.20625001 0 0 0 5.36959269-69.943909c-0.00994388-166.08943902-87.32547796-311.81420293-218.6915546-394.09823051zM605.93803103 357.87693858a93.93749974 93.93749974 0 1 1-187.89594924 6.1e-7 93.93749974 93.93749974 0 0 1 187.89594924-6.1e-7z" p-id="5405" data-v-c6073ba8></path><path d="M429.50777625 765.63860547C429.50777625 803.39355007 466.44236686 1000.39046097 512.00932183 1000.39046097c45.56695499 0 82.4922232-197.00623328 82.5015456-234.7518555 0-37.75494459-36.9345906-68.35043303-82.4922232-68.34111062-45.57627738-0.00932239-82.52019037 30.59548842-82.51086798 68.34111062z" p-id="5406" data-v-c6073ba8></path></svg></div><APlayer audio="" fixed="true" theme="#b7daff" loop="loop" order="random" preload="auto" volume="0.7" mutex="true" lrc-type="3" list-folded="true" list-max-height="250" storage-name="vuepress-plugin-meting" id="aplayer-fixed"></APlayer></div></div>
    <script src="/assets/js/app.2d22f3f9.js" defer></script><script src="/assets/js/3.6721f6a0.js" defer></script><script src="/assets/js/1.546ea5a7.js" defer></script><script src="/assets/js/12.3f3699b0.js" defer></script>
  </body>
</html>
